<template>
        <span id="edit">
            <el-button size="medium" type="primary"   @click="isShowBox = true">编辑</el-button>
            <el-drawer
                    title="值班管理信息编辑区域"
                    :before-close="handleClose"
                    :visible.sync="isShowBox"
                    direction="rtl"
                    :with-header="false"
                    custom-class="demo-drawer"
                    ref="drawer"
                    size="35%"
            >
            <div class="demo-drawer__content" id="editcontent">
                <el-form :model="editData">
                     <el-form-item  style="margin-top: 130px" label="日期" :label-width="formLabelWidth">
<!--                         <el-input v-model="editData.work_day" autocomplete="on">-->
                            <el-date-picker
                                    clearable
                                    v-model="editData.work_day"
                                    type="date"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择查询日期">
                            </el-date-picker>
<!--                        </el-input>-->
                    </el-form-item>
                     <el-form-item label="时间段" :label-width="formLabelWidth">
                         <el-select v-model="editData.time_slot" placeholder="请选择" >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作人员" :label-width="formLabelWidth">
                        <el-input v-model="editData.staff_id" autocomplete="on">
                            <template slot="append" >
                                 <Transfer @selectPerson="SPerson"></Transfer>
                             </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer" id="footerdiv">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
            </span>
</template>

<script>
    import {mapActions} from 'vuex'
    import  Transfer from '../../components/houtai/transfer'
    export default {
        components:{
            Transfer
        }  ,
        props:['editData'],
        data() {
            return {
                options: [{
                    value: '8：00—14：00',
                    label: '8：00—14：00'
                }, {
                    value: '14：00—22：00',
                    label: '14：00—22：00'
                }],
                value1:'',
                isShowBox: false,
                loading: false,
                formLabelWidth: '100px',
                timer: null,
            };
        },
        methods: {
            SPerson:function(selectPerson){
                // console.log(selectPerson)
                // console.log(selectPerson)
                this.editData.g_person =selectPerson.toString()
            },
            modify1() {
                this.$notify.success({
                    title: '成功',
                    message: '编辑成功！',
                    offset:50
                });
            },
            modify2() {
                this.$notify.error({
                    title: '错误',
                    message: '网络出故障了，编辑失败，请稍后重试！'
                });
            },
            ...mapActions(['getCurrentDataA']),
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交修改的表单吗？')
                    .then(_ => {
                        //在这里获取编辑之后的数据  操作数据库数据
                        // console.log(this.editData)
                        this.$axios({
                            url:'/EditDishesMain',
                            method:'post',
                            data:{data:this.editData}
                        }).then(res=>{
                            // console.log(res.status)
                            if(res.code===200){
                                this.$emit('queren')
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    done();
                                    // 动画关闭需要一定的时间
                                    setTimeout(() => {
                                        this.loading = false;
                                    }, 200);
                                }, 200);
                                this.modify1()
                            }
                        }) .catch(err=>{
                            this.$emit('queren')
                            this.modify2()
                        })


                    })
                    .catch(_ => {
                        this.$emit('queren')
                    });

            },
            cancelForm() {
                this.$emit('queren')
                this.loading = false;
                this.isShowBox = false;
                clearTimeout(this.timer);
            }
        } ,
    }

</script>
<style scoped>
    #edit{
        margin-right: 20px;
    }
    .el-input{
        width: 300px;
    }
    #footerdiv{
        margin-left: 100px;
    }
</style>